<template>
  <div>
    <div class="ma-content-block p-4">
      <ma-crud :options="crud" :columns="columns" ref="crudRef">
        <template #tableAfterButtons>
          <a-button
              @click="openQrcodeBatch"
              type="outline"
              status="primary"
          ><template #icon><IconUpload /></template>批量上传</a-button>
        </template>

        <template #member_name="{ record }">
          {{ record.member?.nickname || '' }}
        </template>

        <template #qrcode="{ record }">
          <a-image :src="record.qrcode ? $tool.showFile(record.qrcode):''" height="40" />
        </template>
      </ma-crud>
    </div>
    <qrcodeBatch ref="qrcodeBatchRef" @success="batchSuccess"/>
  </div>
</template>

<script setup>
import {ref, reactive} from 'vue'
import api from '@/api/prm/activity_qrcode.js'
import qrcodeBatch from './components/qrcodeBatchUpload.vue'

const crudRef = ref()
const qrcodeBatchRef = ref()

const openQrcodeBatch = () => {
  qrcodeBatchRef.value.open()
}

const batchSuccess = () => {
  crudRef.value.requestData()
}

const open = () => {
  // visible.value = true
  // crudRef.value.requestData()
}

const crud = reactive({
  // autoRequest: true,
  api: api.list,
  // tablePagination:false,
  searchColNumber:3,
  showTools:false,
  showIndex: false,
  rowSelection: {showCheckedAll: false},
  operationColumn: true,
  operationColumnWidth: 180,
  add: {show: true, api: api.add},
  edit: {show: true, api: api.update},
  delete: {show: true, api: api.delete},
  formOption: {viewType: 'modal', width: 800},
})

const allotStatusList = [
  {value: 1, label: '未分配'},
  {value: 2, label: '已分配'},
]
const columns = reactive([
  {title: 'ID', dataIndex: 'id', addDisplay: false, editDisplay: false, width: 50, hide: true},
  {
    title: '活动名称', dataIndex: 'activity_id', search: true, width: 80,
    formType: 'select', dict: { url: 'prm/activity/allList?act_type=1', props: { label: 'name', value: 'id' }, translation: true,pageSize:50,openPage:false },
  },
  {title: '活动码', dataIndex: 'qrcode', formType: 'upload', search: false, width: 80,},
  {title: '码名称', dataIndex: 'qrcode_name', formType: 'input', search: false, width: 80,},
  {
    title: '分配状态', dataIndex: 'allot_status', addDisplay: false, editDisplay: false, formType: 'select', search: true, width: 80,
    dict: { data: allotStatusList, translation: true },
  },
  {
    title: '是否过期', dataIndex: 'is_expired', addDisplay: false, editDisplay: false, formType: 'select', search: true, width: 80,
    dict: { data: [{value: 1, label: '否'}, {value: 2, label: '是'},], translation: true },
  },

  {title: '所属用户', dataIndex: 'member_name', addDisplay: false, editDisplay: false, formType: 'input', search: true, width: 80,},
  // {title: '所属申请记录', dataIndex: 'apply_record', addDisplay: false, editDisplay: false, formType: 'input', search: false, width: 80,},

  {title: '分配时间', dataIndex: 'allot_at', addDisplay: false, editDisplay: false, search: false},
  {title: '过期时间', dataIndex: 'expired_at', addDisplay: false, editDisplay: false, search: false},
  {title: '创建时间', dataIndex: 'created_at', addDisplay: false, editDisplay: false, search: false},
])

defineExpose({open})

</script>
